<!DOCTYPE html>
<!-- saved from url=(0026)http://www.layui.com/demo/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>在线示例 - layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="./在线示例 - layui_files/layui.css" media="all">
  <link rel="stylesheet" href="./在线示例 - layui_files/global.css" media="all">
<script type="text/javascript" async="" charset="utf-8" src="./在线示例 - layui_files/core.php"></script><link rel="preload" href="./在线示例 - layui_files/integrator.js" as="script"><script type="text/javascript" src="./在线示例 - layui_files/integrator.js"></script><link id="layuicss-skincodecss" rel="stylesheet" href="./在线示例 - layui_files/code.css" media="all"><link id="layuicss-layer" rel="stylesheet" href="./在线示例 - layui_files/layer.css" media="all"></head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header header header-demo">
  <div class="layui-main">
    <a class="logo" href="http://www.layui.com/">
      <img src="./在线示例 - layui_files/logo.png" alt="layui">
    </a>
    <div class="layui-form component">
      <select lay-search="" lay-filter="component">
        <option value="">搜索组件或模块</option>
        <option value="element/layout.html">grid 栅格布局</option>
        <option value="element/layout.html#admin">admin 后台布局</option>
        <option value="element/color.html">color 颜色</option>
        <option value="element/icon.html">iconfont 字体图标</option>
        <option value="element/anim.html">animation 动画</option>
        <option value="element/button.html">button 按钮</option>
        <option value="element/form.html">form 表单组</option>
        <option value="element/form.html#input">input 输入框</option>
        <option value="element/form.html#select">select 下拉选择框</option>
        <option value="element/form.html#checkbox">checkbox 复选框</option>
        <option value="element/form.html#switch">switch 开关</option>
        <option value="element/form.html#radio">radio 单选框</option>
        <option value="element/form.html#textarea">textarea 文本域</option>
        <option value="element/nav.html">nav 导航菜单</option>
        <option value="element/nav.html#breadcrumb">breadcrumb 面包屑</option>
        <option value="element/tab.html">tabs 选项卡</option>
        <option value="element/progress.html">progress 进度条</option>
        <option value="element/collapse.html">collapse 折叠面板/手风琴</option>
        <option value="element/table.html">table 表格元素</option>
        <option value="element/badge.html">badge 徽章</option>
        <option value="element/timeline.html">timeline 时间线</option>
        <option value="element/auxiliar.html#blockquote">blockquote 引用块</option>
        <option value="element/auxiliar.html#fieldset">fieldset 字段集</option>
        <option value="element/auxiliar.html#hr">hr 分割线</option>
        
        <option value="modules/layer.html">layer 弹出层/弹窗综合</option>
        <option value="modules/laydate.html">laydate 日期时间选择器</option>
        <option value="modules/layim.html">layim 即时通讯/聊天</option>
        <option value="modules/laypage.html">laypage 分页</option>
        <option value="modules/laytpl.html">laytpl 模板引擎</option>
        <option value="modules/form.html">form 表单模块</option>
        <option value="modules/table.html">table 数据表格</option>
        <option value="modules/upload.html">upload 文件/图片上传</option>
        <option value="modules/element.html">element 常用元素操作</option>
        <option value="modules/carousel.html">carousel 轮播/跑马灯</option>
        <option value="modules/layedit.html">layedit 富文本编辑器</option>
        <option value="modules/tree.html">tree 树形菜单</option>
        <option value="modules/flow.html">flow 信息流/图片懒加载</option>
        <option value="modules/util.html">util 工具集</option>
        <option value="modules/code.html">code 代码修饰</option>
      </select><div class="layui-form-select"><div class="layui-select-title"><input type="text" placeholder="搜索组件或模块" value="" class="layui-input"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">搜索组件或模块</dd><dd lay-value="element/layout.html" class="">grid 栅格布局</dd><dd lay-value="element/layout.html#admin" class="">admin 后台布局</dd><dd lay-value="element/color.html" class="">color 颜色</dd><dd lay-value="element/icon.html" class="">iconfont 字体图标</dd><dd lay-value="element/anim.html" class="">animation 动画</dd><dd lay-value="element/button.html" class="">button 按钮</dd><dd lay-value="element/form.html" class="">form 表单组</dd><dd lay-value="element/form.html#input" class="">input 输入框</dd><dd lay-value="element/form.html#select" class="">select 下拉选择框</dd><dd lay-value="element/form.html#checkbox" class="">checkbox 复选框</dd><dd lay-value="element/form.html#switch" class="">switch 开关</dd><dd lay-value="element/form.html#radio" class="">radio 单选框</dd><dd lay-value="element/form.html#textarea" class="">textarea 文本域</dd><dd lay-value="element/nav.html" class="">nav 导航菜单</dd><dd lay-value="element/nav.html#breadcrumb" class="">breadcrumb 面包屑</dd><dd lay-value="element/tab.html" class="">tabs 选项卡</dd><dd lay-value="element/progress.html" class="">progress 进度条</dd><dd lay-value="element/collapse.html" class="">collapse 折叠面板/手风琴</dd><dd lay-value="element/table.html" class="">table 表格元素</dd><dd lay-value="element/badge.html" class="">badge 徽章</dd><dd lay-value="element/timeline.html" class="">timeline 时间线</dd><dd lay-value="element/auxiliar.html#blockquote" class="">blockquote 引用块</dd><dd lay-value="element/auxiliar.html#fieldset" class="">fieldset 字段集</dd><dd lay-value="element/auxiliar.html#hr" class="">hr 分割线</dd><dd lay-value="modules/layer.html" class="">layer 弹出层/弹窗综合</dd><dd lay-value="modules/laydate.html" class="">laydate 日期时间选择器</dd><dd lay-value="modules/layim.html" class="">layim 即时通讯/聊天</dd><dd lay-value="modules/laypage.html" class="">laypage 分页</dd><dd lay-value="modules/laytpl.html" class="">laytpl 模板引擎</dd><dd lay-value="modules/form.html" class="">form 表单模块</dd><dd lay-value="modules/table.html" class="">table 数据表格</dd><dd lay-value="modules/upload.html" class="">upload 文件/图片上传</dd><dd lay-value="modules/element.html" class="">element 常用元素操作</dd><dd lay-value="modules/carousel.html" class="">carousel 轮播/跑马灯</dd><dd lay-value="modules/layedit.html" class="">layedit 富文本编辑器</dd><dd lay-value="modules/tree.html" class="">tree 树形菜单</dd><dd lay-value="modules/flow.html" class="">flow 信息流/图片懒加载</dd><dd lay-value="modules/util.html" class="">util 工具集</dd><dd lay-value="modules/code.html" class="">code 代码修饰</dd></dl></div>
    </div>
    <ul class="layui-nav">
      <li class="layui-nav-item ">
        <a href="http://www.layui.com/doc/">文档<!-- <span class="layui-badge-dot"></span> --></a> 
      </li>
      <li class="layui-nav-item layui-this">
        <a href="http://www.layui.com/demo/">示例<!--  --></a>
      </li> 
      
      <li class="layui-nav-item layui-hide-xs">
        <a href="http://fly.layui.com/" target="_blank">社区</a>
      </li>
      
      
      <li class="layui-nav-item">
        <!--<span class="layui-badge-dot" style="margin: -4px 3px 0;"></span>-->
        <a href="javascript:;">周边<span class="layui-nav-more"></span></a>
        <dl class="layui-nav-child">
          <dd class="layui-hide-sm layui-show-xs"><a href="http://fly.layui.com/" target="_blank">社区交流</a><hr></dd>
          <dd><a href="http://layim.layui.com/" target="_blank">即时聊天</a></dd>
          <dd><a href="http://www.layui.com/template/fly/" target="_blank">社区模板<span class="layui-badge-dot"></span></a></dd>
          <hr>
          <dd><a href="http://www.layui.com/alone.html" target="_blank">独立组件</a></dd>
          <dd><a href="http://fly.layui.com/jie/9842/" target="_blank">Axure组件</a></dd>
        </dl>
      </li>
      
      
      <li class="layui-nav-item layui-hide-xs">
        <a href="http://www.layui.com/admin/" target="_blank">后台<span class="layui-badge-dot"></span></a>
      </li>
      
      <li class="layui-nav-item layui-hide-xs">
        <a href="http://www.layui.com/v1/" target="_blank">1.x</a>
      </li>
    <span class="layui-nav-bar"></span></ul>
  </div>
</div>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> 
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      
<ul class="layui-nav layui-nav-tree site-demo-nav">
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">开发工具<span class="layui-nav-more"></span></a>
    <dl class="layui-nav-child">
      <dd>
        <a href="http://www.layui.com/demo/">调试预览</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">布局<span class="layui-nav-more"></span></a>
    <dl class="layui-nav-child">
      <dd class="">
        <a href="http://www.layui.com/demo/grid.html">栅格</a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/admin.html">后台布局</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">基本元素<span class="layui-nav-more"></span></a>
    <dl class="layui-nav-child">
      <dd class="">
        <a href="http://www.layui.com/demo/button.html">按钮</a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/form.html">表单</a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/nav.html">导航/面包屑</a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/tab.html">选项卡</a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/progress.html">进度条</a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/panel.html">面板</a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/badge.html">徽章</a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/timeline.html">时间线</a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/table-element.html">静态表格</a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/anim.html">动画</a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/auxiliar.html">辅助元素</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">组件示例<span class="layui-nav-more"></span></a>
    <dl class="layui-nav-child">
      <dd class="">
        <a href="http://www.layui.com/demo/layer.html">
          弹出层
        </a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/laydate.html">
          日期与时间选择
        </a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/layim.html">
          即时通讯
        </a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/table.html">
          数据表格
        </a>
      </dd>
       <dd class="">
        <a href="http://www.layui.com/demo/laypage.html">
          分页
        </a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/upload.html">
          文件上传
        </a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/carousel.html">
          轮播
        </a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/laytpl.html">
          模板引擎
        </a>
      </dd>
      
      <dd class="">
        <a href="http://www.layui.com/demo/flow.html">
          流加载
        </a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/util.html">
          工具集
        </a>
      </dd>
      <dd class="">
        <a href="http://www.layui.com/demo/code.html">
          代码修饰器
        </a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
<span class="layui-nav-bar"></span></ul>

    </div>
  </div>
  <div class="layui-body site-demo">

    <div class="site-demo-result">
      <iframe frameborder="0" id="LAY_demo" name="LAY_demo" src="./在线示例 - layui_files/saved_resource.html"></iframe>
    </div>
  </div>
  <div class="layui-footer footer footer-demo">
  <div class="layui-main">
    <p>© 2018 <a href="http://www.layui.com/">layui.com</a> MIT license</p>
    <p>
      <a href="http://fly.layui.com/case/2018/" target="_blank">案例</a>
      <a href="http://fly.layui.com/jie/3147/" target="_blank">众筹</a>
      <a href="mailto:xianxin@layui-inc.com">联系</a>
      <a href="https://github.com/sentsin/layui/" target="_blank" rel="nofollow">GitHub</a>
      <a href="https://gitee.com/sentsin/layui" target="_blank" rel="nofollow">码云</a>
      <a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
    </p>
    <p class="site-union">
      <a href="https://www.upyun.com/?from=layui" target="_blank" rel="nofollow" upyun=""><img src="./在线示例 - layui_files/upyun.png"></a>
      <span>提供 CDN 赞助</span>
    </p>
  </div>
</div>
<script async="" src="./在线示例 - layui_files/adsbygoogle.js"></script>
<div class="site-tree-mobile layui-hide">
  <i class="layui-icon"></i>
</div>
<div class="site-mobile-shade"></div>
<script src="./在线示例 - layui_files/layui.js" charset="utf-8"></script>
<script>
window.global = {
  pageType: 'demo'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
layui.config({
  base: '//res.layui.com/lay/modules/layui/'
  ,version: '1515376178738'
}).use('global');
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script><span id="cnzz_stat_icon_30088308"></span><script src="./在线示例 - layui_files/c.php" type="text/javascript"></script>
</div>

</body></html>